<template>
<!--    搜索结果页面-->
    <div class="result">
<!--        顶部搜索标题区域-->
        <div class="top">
            <div><h1 style="font-weight: 900;color: #333333">{{tatal}}</h1></div><div style="margin-top: 40px;font-size: small;font-weight: lighter"><span>找到{{count}}个结果</span></div>
        </div>

<!--        内容主体区域-->
        <div class="content">
            <el-tabs v-model="activeName" @tab-click="handleClick">
<!--                歌曲列表-->
                <el-tab-pane label="歌曲" name="first">
                    <el-table
                            @row-click="playmusic"
                            :data="musiclist"
                            style="width: 100%">
                        <el-table-column

                                label=""
                                width="30">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="音乐标题"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="artists[0].name"
                                label="歌手"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="album.name"
                                label="专辑"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="duration"
                                label="时长">
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <div style="width: 150px;margin-left: 200px">
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="this.count"
                            :page-size="20"
                            @current-change="handCurrentChange">
                    </el-pagination>
                </div>
<!--                歌单列表-->
                <el-tab-pane label="歌单" name="second">歌单</el-tab-pane>
<!--                mv列表区域-->
                <el-tab-pane label="MV" name="third">MV</el-tab-pane>
            </el-tabs>

        </div>
    </div>
</template>

<script>
    import  axios from'axios'
    export default {
        name: "result",
        data(){
            return{
                tatal:'',
                activeName: 'first',
                musiclist:[],
                page:1,
                count:0
                }
        },
        created() {
            this.getTotal();
            this.getmusic(this.page)
        },
        methods:{
            // 获取搜索标题
            getTotal(){
                this.tatal=this.$route.params.id
            },
            getmusic(offset){
                axios({
                    url:'https://autumnfish.cn/search',
                    method:'get',
                    params:{
                        type:1,
                        limit:20,
                        offset:(offset-1)*10,
                        keywords:this.$route.params.id
                    }
                }).then(res=>{
                        this.musiclist=res.data.result.songs;
                        // 保存总数
                        this.count=res.data.result.songCount;
                        for(let i=0;i<this.musiclist.length;i++){
                            let min=parseInt(this.musiclist[i].duration/1000/60)
                            let sec=parseInt((this.musiclist[i].duration/1000)%60)
                            if(min<10){
                                min='0'+min
                            }
                            if(sec<10){
                                sec='0'+sec
                            }
                            this.musiclist[i].duration=min+":"+sec
                        }
                    console.log(res);
                },err=>{
                    console.log(err);
                })
            },
            // 获取当前需要播放音乐的详情
            playmusic(row, column, event){
                axios({
                    method:'get',
                    url:' https://autumnfish.cn/song/url',
                    params:{
                        id:row.id
                    }
                }).then(res=>{
                    this.$store.commit('turnmusicurl',res.data.data[0])

                },err=>{
                    console.log(err)
                })
                this.$store.commit('addAllMusic',row)
                console.log(this.$store.state.collectionMusicList)
            },
            handCurrentChange(val){
                this.getmusic(val)
            },
            handleClick(tab, event) {
                console.log(tab, event);
            }
        }

    }
</script>

<style scoped>

    .top{
        display: flex;
        width: 90%;
        height: 100px;

        margin: 0 auto;
    }
    .content{
        margin: 0 auto;
        width: 90%;

    }

</style>